<template>
	<view class="bg-f">
		<!-- 顶部菜单 star-->				
		<view class="is-nav">
			<view class="is-nav-li is-center is-blue is-active">
				OTC接单
			</view>
			<view class="is-nav-li is-center is-grey">
				<text @tap="ordering">进行中</text>
			</view>
			
			<view class="is-nav-li is-right" @tap = "closeorder">
				<text class="is-red-color">停止接单</text>
			</view>
		</view>	
		<view class="has-pdlr-10 has-pdt-10 s-col">
			<view class="is-size-10 is-col-10">
				余额：<text class="is-red-color">{{user_money_can}}DC</text>
			</view>
			<view class="is-col-4 is-size-14 is-online" :class="[online === false ? 'is-red-color is-bold' : 'is-blue']">
				{{online === false ? '离线' : '在线'}}
			</view>
			<view class="is-col-8 is-size-12 is-right is-grey">
				今日走单：<text class="is-bold">{{today_num}}</text>
			</view>
		</view>
		<view class="has-pd-10 s-row">
			
		</view>
		<view class="has-pdlr-10 has-pdb-5 s-row is-bg-wf">
			<view class="is-col-4 is-size-14 is-red-color" @click = "setcode">
				<text class="is-bold">{{you_chose}}</text>
			</view>
			<view class="is-col-5 is-size-12 is-grey is-center">
				WX:<text class="is-bold">{{today_num_wx}}</text>
			</view>
			<view class="is-col-5 is-size-12 is-grey is-center">
				ZFB:<text class="is-bold">{{today_num_zfb}}</text>
			</view>
			<view class="is-col-5 is-size-12 is-grey is-center">
				QQ:<text class="is-bold">{{today_num_qq}}</text>
			</view>
			<view class="is-col-5 is-size-12 is-grey is-center">
				BANK:<text class="is-bold">{{today_num_bank}}</text>
			</view>
		</view>
		<view class="pd-bottome">
			<view class="has-pd-20 s-row ma-order" v-for="(item,index) in order" :key="index">
				<view class="is-col-6 is-left ma-box">
					<image :src="ma_type_img" mode=""></image>
				</view>
				<view class="is-col-12">
					<view class="is-bold">{{item.out_trade_no}}</view>
					<view class="is-grey">￥{{item.total_fee_true}}</view>
				</view>
				<view class="is-col-6 is-right" @tap="grab(item.id,index)">
					<view class="pie">
					  <view class="pie-inner">
					  抢单
					  </view>
					</view>
				</view>
			</view>
			<view v-if="showLoader">
				<mht-loader loadingType="ball-pulse"></mht-loader>
			</view>
		</view>
		
		<!-- 底部 ent-->
		<!-- 底部导航 -->
		<view class="is-foot bg-f footmemu is-center">
			<view class="is-col-4 has-pdtb-4" @tap = "closeorder">
				<image src="../../static/tabbar/home.png" mode=""></image>
				<text class="is-block">首页</text>
			</view>
			<view class="is-col-5 has-pdtb-4">
				<image src="../../static/tabbar/orderH.png" mode=""></image>
				<text class="is-block is-blue">接单</text>
			</view>
			<view class="is-col-6 has-pdtb-4"  @tap="goshare">
				<image src="../../static/tabbar/share.png" mode=""></image>
				<text class="is-block">邀请赚钱</text>
			</view>
			<view class="is-col-5 has-pdtb-4" @tap="gohome">
				<image src="../../static/tabbar/my.png" mode=""></image>
				<text class="is-block">我的</text>
			</view>
			<view class="is-col-4 has-pdtb-4" @tap="gochat">
				<image src="../../static/tabbar/kefu.png" mode=""></image>
				<text class="is-block">客服</text>
			</view>
		</view>
		<!-- 底部导航 -->
		<view>
		    <show-modal></show-modal>
		</view>
	</view>
</template>
 
<script>
	var _self;
	var ordertimer = null;
	import uniIcons from '@/components/uni-icons/uni-icons.vue';
	import minSwitch from '@/components/m-switch/m-switch.vue';
	import mhtLoader from '@/components/mht-loader/mht-loader.vue'; 
	export default {
		components: {
			uniIcons,
			minSwitch,
			mhtLoader
		},
		data() {
			return {
				showLeft: false,
				showRight: false,
				foxtoken:'',
				foxcode:'',
				foxactive:'',
				memu:[],
				userinfo:[],
				user_money_can:0,
				fox_money_can:0,
				fox_user_jihuo:0,
				online:false,
				ma_lock:0,
				socketTask: null,
				// 确保websocket是打开状态
				is_open_socket: false,
				order:[],
				ma_type:0,
				ma_type_img:'',
				ma_id:0,
				uid:0,
				user_tel:'',
				diamond_money_can:0,
				today_num:0,
				today_num_wx:0,
				today_num_zfb:0,
				today_num_qq:0,
				today_num_bank:0,
				onlymecity:1,
				mycity:'',
				you_chose:'WX',
				showLoader:true,
				area:'',
				user_region:''
			}
		},
		onLoad() {
			_self = this;
			this.mycity = "选择同城（"+uni.getStorageSync('region')+"）";
			let music = uni.getStorageSync('music');
			if(music === true){
				this.OrderingAudio();
			}		
			this.getinfo();
			var matype = uni.getStorageSync('matype');
			var area = uni.getStorageSync('area');
			if(matype==0){
				this.you_chose = 'WX';
			}else if(matype==1){
				this.you_chose = 'ZFB';
			}else if(matype==2){
				this.you_chose = 'QQ';
			}else if(matype==3){
				this.you_chose = 'BANK';
			}
			// console.log(matype)
			if(area == 'on'){
				this.user_region = uni.getStorageSync('region');
			}else{
				this.user_region = '';
			}
			// console.log(this.user_region)
			let active = uni.getStorageSync('active');
			if(active == false){
				if(matype == ''){
					uni.showToast({
						title:'请先设置默认收款码',
						icon:'none',
						mask:true
					})
					setTimeout(function() {
					    uni.navigateTo({
					    	url:'../allcode/listcode'
					    })
					}, 1500)
					return;
				}
			}else{
				uni.reLaunch({
					url:'./order_ing'
				})
			}
			
			
			this.memu = this.service.memu;
			let that = this
			this.online = that.$websocket.getters.sendStatus;
			this.openOrderlist();
			
		},
		computed: {
			socketMsgs() {
				return this.$websocket.getters.socketMsgs
			},
			neworder() {
				return this.order
			},
			onlines(){
				let that = this
				return that.$websocket.getters.sendStatus
			}
			
		},
		watch:{
			'socketMsgs': {
				//处理接收到的消息
				handler: function() {
					let that = this
					let sMsg = that.socketMsgs
					this.domsg(sMsg);
				  }
			},
			neworder: {
				handler: (val, olVal) => {
					let a = Object.keys(val).length;
					let b = Object.keys(olVal).length;
					let music = uni.getStorageSync('music');
					if(b==0 && a >0){
						if(music === true){
							_self.DingdanAudio();
						}
					}else if(b>0 && a >0){
						if(JSON.stringify(val) !== JSON.stringify(olVal)){
							if(music === true){
								_self.DingdanAudio();
							}
						}
					}
				},
				deep: true
			},
			onlines: {
				handler:(Val)=>{
					_self.online = Val;
					_self.LineAuto(_self.online);
				},
				deep:true
			}
		},
		methods: {
			domsg:function(sMsg){
				if(sMsg.type == 'order'){
					if(sMsg.data.list.length >0){
						this.showLoader = false;
						this.order = sMsg.data.list;
					}else{
						this.showLoader = true;
						this.order = [];
					}
					this.today_num = sMsg.today_num;
				}else if(sMsg.type == 'grab'){
					this.order.splice(sMsg.index, 1);
					if(sMsg.msg){
						this.user_money_can = parseFloat(sMsg.money_can).toFixed(2);
						// uni.showToast({title:'抢单成功',icon:'none'})
						let grabid = sMsg.id;
						uni.navigateTo({
							url:'./orderdo?id='+grabid
						})
					}else{
						uni.showToast({title:'抢单失败',icon:'none'})
					}
				}else if(sMsg.type == 'none'){
					this.order = [];
					this.showLoader = true;
					this.today_num = sMsg.today_num;
				}else if(sMsg.type == 'nograb'){
					this.$showModal({
						title: '提示',
						content: '可用余额须大于'+this.diamond_money_can+'DC，方可抢单',
						cancelText:'放弃',
						confirmText:'买币',
						success: function (res) {
							if (res.confirm) {
								uni.navigateTo({
									url:'../account/buydc'
								})
							}
						}
					})
				}
			},
			setcode(){
				uni.navigateTo({
					url:'../allcode/listcode'
				})
			},
			getinfo(){
				let info = this.service.getfox();
				if(info[0]){
					this.foxtoken = info[0]['foxtoken'];
					uni.request({
						url: this.service.FOX_URL + 'diamond/get_userinfo_order',
						method:'POST',
						data: {
							user_key: this.foxtoken
						},
						dataType:'json',
						header:{
							'content-type':'application/x-www-form-urlencoded',
						},
						success: res => {
							// var rest = JSON.stringify(res);
							// console.log(rest)
							var rest = res.data;
							// console.log(rest.status)
							if(rest.status == 'success'){
								this.userinfo = rest.msg;
								// console.log(this.userinfo)
								this.today_num = this.userinfo['today_order'];
								this.today_num_wx = this.userinfo['today_order_wx'];
								this.today_num_zfb = this.userinfo['today_order_zfb'];
								this.today_num_qq = this.userinfo['today_order_qq'];
								this.today_num_bank = this.userinfo['today_order_bank'];
								this.ma_lock = this.userinfo['ma_lock'];
								this.uid= this.userinfo['user_id'];
								this.user_tel= this.userinfo['user_name'];
								this.diamond_money_can = this.userinfo['diamond_money_can'];
								this.user_money_can = this.userinfo['user_money_can'];
								if(this.userinfo['ma']){
									if(this.userinfo['ma']['ma_type']==0){
										this.ma_type = 'ma_wx';
										this.ma_type_img = '../../static/imgs/ma_wx.png';
									}else if(this.userinfo['ma']['ma_type']==1){
										this.ma_type = 'ma_zfb';
										this.ma_type_img = '../../static/imgs/ma_zfb.png';
									}else if(this.userinfo['ma']['ma_type']==2){
										this.ma_type = 'ma_qq';
										this.ma_type_img = '../../static/imgs/ma_qq.png';
									}else if(this.userinfo['ma']['ma_type']==3){
										this.ma_type = 'ma_bank';
										this.ma_type_img = '../../static/imgs/ma_bank.png';
									}
									this.ma_id = this.userinfo['ma']['id'];
								}
							}else if(rest.status == 'error'){
								uni.showToast({
									title:rest.msg,
									icon:'none',
									mask:true
								})
							}else{
								uni.showToast({
									title:rest.msg,
									icon:'none',
									mask:true
								})
							}
						}
					})
				}else{
					uni.reLaunch({
						url:'../logon/login'
					})
				}
			},
			gohome(){
				uni.reLaunch({
					url:'../member/homes'
				})
			},
			gochat(){
				uni.reLaunch({
					url:'/pages/index/chat'
				})				
			},
			goshare(){
				uni.reLaunch({
					url:'../member/my_shares'
				})
			},
			// 进入这个页面的时候创建websocket连接【整个页面随时使用】
			openOrderlist() {
				clearInterval(ordertimer)
				let that = this			
				if(!that.$websocket.getters.orderOpenl){
					ordertimer = setInterval(()=>{
						let matype = uni.getStorageSync('matype');
						that.$websocket.commit('setMa_type',matype);
						that.$websocket.commit('setOrder_position',this.user_region);
						that.$websocket.commit('setUser_key',this.foxtoken);
						that.$websocket.commit('webSocketOrder');	
					},1000)	;
					that.$once('hook:beforeDestroy', () => { 
						_self.clearTimer();
					})
				}
			},
			//停止接单
			closeorder() {
				let that = this
				this.clearTimer();
				that.$websocket.commit('webSocketOrder_shut');
				uni.reLaunch({
					url:'/pages/index/index'
				})
			},

			grab:function(id,index){
				if(parseInt(this.user_money_can) < parseInt(this.diamond_money_can)){
					this.$showModal({
						title: '提示',
						content: '可用余额须大于'+this.diamond_money_can+'DC，方可抢单',
						cancelText:'放弃',
						confirmText:'买币',
						success: function (res) {
							if (res.confirm) {
								uni.navigateTo({
									url:'../account/buydc'
								})
							}
						}
					})
				}else{
					let that = this
					if (that.$websocket.getters.socketIsOpen) {
						that.$websocket.commit('setOrder_id',id);
						that.$websocket.commit('setMa_id',this.ma_id);
						that.$websocket.commit('setMa_type',this.ma_type);
						that.$websocket.commit('setUid',this.uid);
						that.$websocket.commit('setUser_tel',this.user_tel);
						that.$websocket.commit('setUser_key',this.foxtoken);
						that.$websocket.commit('setIndex',index);
						that.$websocket.commit('webSocketGrab');
					}
				}
			},
			ordering(){
				uni.reLaunch({
					url:'./order_ing'
				})
			},
			clearTimer() {
				if(ordertimer){
					clearInterval(ordertimer);
					ordertimer = null;				
				}
				let that = this
				that.$websocket.commit('webSocketOrder_shut');
			}
		},
		onShow:function() {    //页面关闭时清除定时器  
			let that = this
			console.log(ordertimer)
		},
		beforeDestroy(){
			let that = this
			this.clearTimer();
			that.$websocket.commit('webSocketOrder_shut');
		},
		destroyed() {
			let that = this
			this.clearTimer();
			that.$websocket.commit('webSocketOrder_shut');
		},
		onUnload:function(){  
		    let that = this
		    this.clearTimer();
		    that.$websocket.commit('webSocketOrder_shut'); 
		}
	}
</script>

<style>
	.spinner {
		margin-left: 20upx;
	    display: inline-block;
	}
	.spinner > view {
	    width: 28upx;
	    height: 28upx;
	    background-color:#2A62FF;
	    border-radius: 100%;
	    display: inline-block;
	    -webkit-animation: bouncedelay 1.6s infinite ease-in-out;
	    animation: bouncedelay 1.6s infinite ease-in-out;
	    -webkit-animation-fill-mode: both;
	    animation-fill-mode: both;
	}
	.spinner .bounce1 {
		margin-right:12upx;
	    -webkit-animation-delay: -0.64s;
	    animation-delay: -0.64s;
	}
	.spinner .bounce2 {
		margin-right:12upx;
	    -webkit-animation-delay: -0.32s;
	    animation-delay: -0.32s;
	}
	.spinner .bounce3 {
		margin-right:12upx;
	    -webkit-animation-delay: -0.16s;
	    animation-delay: -0.16s;
	}
	.spinner .bounce4 {
		margin-right:12upx;
	    -webkit-animation-delay: -0.16s;
	    animation-delay: -0.16s;
	}
	.spinner .bounce5 {
		margin-right:12upx;
	    -webkit-animation-delay: -0.16s;
	    animation-delay: -0.16s;
	}
	@-webkit-keyframes bouncedelay {
	    0%, 100% {
	        -webkit-transform: scale(0.0)
	    }
	    50% {
	        -webkit-transform: scale(1.0)
	    }
	}
	@keyframes bouncedelay {
	    0%, 100% {
	        transform: scale(0.0);
	        -webkit-transform: scale(0.0);
	    }
	    50% {
	        transform: scale(1.0);
	        -webkit-transform: scale(1.0);
	    }
	}
	.pd-bottome{padding-bottom: 80upx;background: #F9F9F9;}
	.pie {
	  display: inline-block;
	  position: relative;
	  width: 90upx;
	  height: 90upx;
	  border-radius: 50%;
	  background: #F30C2C;
	  background-image: linear-gradient(to right, transparent 50%, #FFFF33 0);
	  color: transparent;
	  text-align: center;
	  border: 1px solid #FF8800;
	}
	.pie::before {
	  content: '';
	  position: absolute;
	  top: 0; left: 50%;
	  width: 50%; height: 100%;
	  border-radius: 0 100% 100% 0 / 50%;
	  background-color: inherit;
	  transform-origin: left;
	  animation: spin 15s linear infinite, bg 30s step-end infinite;
	}
	@keyframes spin {
	  to { transform: rotate(.5turn); }
	}
	@keyframes bg {
	  50% { background: #FFFF00; }
	}   
	.pie-inner {
	    position: absolute;
	    top: 9%;
	    bottom: 9%;
	    left: 9%;
	    right: 9%;
	    background-color: #FF8800;
	    border-radius: 50%;
	    overflow: hidden;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    color: #FFFFBB;
	  }
	  .ma-box image {width:100upx;height: 100upx;}
	  .ma-order{background: #FFFFFF;border-top: 2upx solid #F0F0F0;}
</style>